<template>
  <div class="announcement-container">
    <div class="announcement-header">
      <el-button @click="$router.back()" link class="back-button">
        <el-icon><ArrowLeft /></el-icon>
        返回
      </el-button>
    </div>
    
    <div class="announcement-content" v-if="announcement">
      <div class="announcement-meta">
        <span class="announcement-tag" :class="announcement.type">{{ announcement.typeText }}</span>
        <span class="announcement-date">{{ announcement.publish_date }}</span>
      </div>
      
      <h1 class="announcement-title">{{ announcement.title }}</h1>
      
      <div class="announcement-body">
        <div v-html="announcement.content"></div>
      </div>
      
      <div class="announcement-footer">
        <p class="publish-info">
          发布时间：{{ announcement.publish_date }} | 
          发布者：{{ announcement.publisher || '系统管理员' }}
        </p>
      </div>
    </div>
    
    <div class="loading-container" v-else>
      <el-skeleton :rows="8" animated />
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { ArrowLeft } from '@element-plus/icons-vue';
import { getAnnouncementDetail } from '../api/announcement';
import { ElMessage } from 'element-plus';

export default {
  name: 'Announcement',

  components: {
    ArrowLeft
  },

  setup() {
    const route = useRoute();
    const announcement = ref(null);
    const loading = ref(true);

    // 获取活动类型文本
    const getActivityTypeText = (type) => {
      const typeMap = {
        system: '系统公告',
        activity: '活动通知',
        maintenance: '维护通知',
        promotion: '优惠活动',
        notice: '公告',
        event: '赛事'
      };
      return typeMap[type] || '公告';
    };

    // 格式化时间
    const formatTime = (timeStr) => {
      if (!timeStr) return '';
      try {
        return new Date(timeStr).toLocaleDateString('zh-CN');
      } catch (error) {
        return timeStr;
      }
    };

    // 获取公告详情
    const fetchAnnouncement = async () => {
      try {
        loading.value = true;
        const id = route.params.id;

        // 首先尝试从API获取
        const response = await getAnnouncementDetail(id);
        if (response.success) {
          announcement.value = {
            id: response.data.id,
            title: response.data.title,
            content: response.data.content,
            type: response.data.type,
            typeText: getActivityTypeText(response.data.type),
            publish_date: formatTime(response.data.publish_time || response.data.created_at),
            publisher: '系统管理员'
          };
        } else {
          throw new Error('API响应失败');
        }
      } catch (error) {
        console.error('获取公告详情失败:', error);

        // API失败时，尝试从localStorage获取
        const storedActivities = localStorage.getItem('activities');
        if (storedActivities) {
          const activities = JSON.parse(storedActivities);
          const activity = activities.find(a => a.id === parseInt(route.params.id));
          if (activity) {
            announcement.value = {
              id: activity.id,
              title: activity.title,
              content: activity.content,
              type: activity.type,
              typeText: getActivityTypeText(activity.type),
              publish_date: formatTime(activity.publishTime || activity.publish_time),
              publisher: '系统管理员'
            };
          }
        }

        // 如果还是没有数据，使用默认数据
        if (!announcement.value) {
          const defaultData = {
            1: {
              id: 1,
              title: '国庆节营业时间调整公告',
              content: `
                <p>尊敬的各位顾客：</p>
                <p>为了更好地为大家服务，我们将在国庆节期间调整营业时间，具体安排如下：</p>
                <h3>营业时间调整</h3>
                <ul>
                  <li><strong>10月1日-10月7日</strong>：上午10:00 - 凌晨2:00</li>
                  <li><strong>10月8日起</strong>：恢复正常营业时间（上午9:00 - 凌晨1:00）</li>
                </ul>
                <p>感谢您的理解与支持！</p>
              `,
              type: 'notice',
              typeText: '公告',
              publish_date: '2023-09-25',
              publisher: '台球吧管理员'
            }
          };
          announcement.value = defaultData[route.params.id] || null;
        }
      } finally {
        loading.value = false;
      }
    };

    onMounted(() => {
      fetchAnnouncement();
    });

    return {
      announcement,
      loading
    };
  }
};
</script>

<style scoped>
.announcement-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.announcement-header {
  margin-bottom: 20px;
}

.back-button {
  color: #409eff;
  font-size: 16px;
}

.announcement-content {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

.announcement-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.announcement-tag {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
  font-weight: bold;
}

.announcement-tag.notice {
  background-color: #409eff;
}

.announcement-tag.activity {
  background-color: #67c23a;
}

.announcement-tag.event {
  background-color: #e6a23c;
}

.announcement-date {
  font-size: 14px;
  color: #909399;
}

.announcement-title {
  font-size: 28px;
  color: #303133;
  margin-bottom: 30px;
  line-height: 1.4;
}

.announcement-body {
  font-size: 16px;
  line-height: 1.8;
  color: #606266;
}

.announcement-body h3 {
  color: #409eff;
  margin: 25px 0 15px 0;
  font-size: 18px;
}

.announcement-body ul {
  margin: 15px 0;
  padding-left: 20px;
}

.announcement-body li {
  margin: 8px 0;
}

.announcement-body p {
  margin: 15px 0;
}

.announcement-footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.publish-info {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

.loading-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .announcement-container {
    padding: 10px;
  }
  
  .announcement-content {
    padding: 20px;
  }
  
  .announcement-title {
    font-size: 24px;
  }
  
  .announcement-body {
    font-size: 15px;
  }
}
</style>
